<!--
	Author: W3layouts

-->

<!DOCTYPE html>
<html>

<head>
    <title>登录和注册响应式</title>
    <script src="js/jquery-3.5.1.min.js"></script>
    <link rel="stylesheet" href="./login/css/style.css">
    <link href="./login/css/popup-box.css" rel="stylesheet" type="text/css" media="all"/>
    <link rel="stylesheet" href="./login/css/index.css" type="text/css">

    <script src="./login/js/index.js" type="text/javascript"></script>
    <script src="js/bootstrap.js"></script>
    <link rel="stylesheet" href="js/bootstrap.css">
    <script src="js/bootstrapValidator.min.js"></script>
    <link rel="stylesheet" href="js/bootstrapValidator.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <script src="./login/js/jquery.magnific-popup.js" type="text/javascript"></script>
    <script type="text/javascript" src="./login/js/modernizr.custom.53451.js"></script>

    <script src="js/jquery.cookie.js"></script>
    <script src="js/jquerysession.js"></script>

    <meta name="keywords"
          content="Sign In And Sign Up Forms  Widget Responsive, Login Form Web Template, Flat Pricing Tables, Flat Drop-Downs, Sign-Up Web Templates, Flat Web Templates, Login Sign-up Responsive Web Template, Smartphone Compatible Web Template, Free Web Designs for Nokia, Samsung, LG, Sony Ericsson, Motorola Web Design"/>

    <script type="application/x-javascript">
        addEventListener("load", function () {
            setTimeout(hideURLbar, 0);
        }, false);

        function hideURLbar() {
            window.scrollTo(0, 1);
        }

        $(document).ready(function () {
            $('.popup-with-zoom-anim').magnificPopup({
                type: 'inline',
                fixedContentPos: false,
                fixedBgPos: true,
                overflowY: 'auto',
                closeBtnInside: true,
                preloader: false,
                midClick: true,
                removalDelay: 300,
                mainClass: 'my-mfp-zoom-in'
            });

            //读取保存密码
            let rem = $.cookie('remember');
            if(rem){
                $("#remember").prop("checked",true);
                $("#username").val($.cookie("username"));
                $("#password").val($.cookie("password"));
            }
            $(function () {
                $("#verifydiv").hide()
            })
        });
    </script>


</head>

<body>
<div class="page-loader">
    <div class="spinner-border"></div>
    <span>Loading ...</span>
</div>

<h1 style="color: rgba(48, 48, 48, 0.836);">进销存货管理系统</h1>
<div class="w3layouts" style="margin: 0 18%;">
    <div class="signin-agile" style=" width:40%;height:500px;background-color: rgba(0, 0, 0, 0.4);">
        <h2>登录
        </h2>
        <form id="youform">
            <input type="text" name="username" id="username" placeholder="用户名" required="">
            <input type="password" name="password" id="password" placeholder="密码" required="">
            <div style="width: 89%" id="verifydiv">
                <input type="text" name="verify" class="" placeholder="验证码" required="" style="width: 55%;"/>
                <a href="javascript:refreshCode1()" style="margin-top: 10px"><img src="/verifyCodeServlet" title="看不清点击刷新" id="verify"
                                                        name="verify" style="border-radius: 14px"/></a>
            </div>
            <ul>
                <li>
                    <input type="checkbox" id="remember" value="">
                    <label for="remember"><span></span>记住密码</label>
                </li>
            </ul>
            <a href="recover-password.html">忘记密码?</a><br>
            <div class="clear"></div>
            <input type="text" class="btn" id="btn1" value="登录" style="background-color: rgb(17, 140, 223);outline: none">
        </form>
        <script>
            $("#btn1").click(function () {
                save_cookies();
                $.ajax({
                    type:"POST",
                    async: false,
                    url: "/login",
                    xhrFields:{withCredentials:true},
                    crossDomaina:true,
                    data:$("#youform").serialize(),
                    dataType: "text",
                    success:function (resp) {
                        let arr = JSON.parse(resp);
                        if(arr[0]==1){
                            $(location).attr("href", "index.html")
                        }else {
                            if (arr[1]<2){
                                alert("登陆失败，请重新登录")
                                $("#username").val("")
                                $("#password").val("")
                            }else {
                                $("#verifydiv").show()
                                $("#username").val("")
                                $("#password").val("")
                            }
                        }
                    }
                })

            })
            
            function save_cookies(){
                if($("#remember").prop("checked")){
                    let username = $("#username").val();
                    let password = $("#password").val();

                    $.cookie("remember","true",{expires:7});
                    $.cookie("username",username,{expires:7 });
                    $.cookie("password",password,{expires:7 });
                }else{
                    $.cookie("remember","false",{expires:-1});
                    $.cookie("username","",{ expires:-1 });
                    $.cookie("password","",{ expires:-1 });
                }
            };
        </script>
    </div>
    <div class="signup-agileinfo" style=" width:40%;height:500px;background-color: rgba(109, 188,241, 0.5);">
        <h3>商品进销存管理系统</h3>
        <p>wdnmd wdnmd wdnmd wdnmd wdnmd wdnmd wdnmd wdnmd wdnmd wdnmd wdnmd wdnmd wdnmd wdnmd wdnmd wdnmd wdnmd wdnmd
            wdnmd wdnmd wdnmd wdnmd wdnmd wdnmd wdnmd wdnmd wdnmd wdnmd wdnmd wdnmd
        </p>
        <div class="more">
            <a class="book popup-with-zoom-anim button-isi zoomIn animated" data-wow-delay=".5s"
               href="#small-dialog">点击注册</a>
        </div>
    </div>
    <div class="clear"></div>
</div>
<div class="footer-w3l">
    <p class="agileinfo"> 中软国际---际国软中 <a href="#" target="_blank">中软国际</a>
    </p>
</div>
<div class="pop-up">
    <div id="small-dialog" class="mfp-hide book-form container">
        <h3>注册表单</h3>
        <form id="myform">
            <div class="form-group">
                <input type="text" class="form-control" id="musername" name="musername" placeholder="用户名" required=""/>
            </div>
            <div class="form-group">
                <input type="text" id="memail" class="form-control" name="memail" placeholder="邮件" required=""/>
            </div>
            <div class="form-group">
                <input type="password" name="password" class="form-control password" placeholder="密码" required=""/>
            </div>
            <div class="form-group">
                <input type="password" name="mpassword" class="form-control password" placeholder="重复密码" required=""/>
            </div>
            <div class="form-group">
                <input type="text" name="vcode" class="form-control" placeholder="验证码" required=""
                       style="width: 160px;float: left"/>
                <a href="javascript:refreshCode2()" style="margin-right: 40px"><img src="/verifyCodeServlet"
                                                                                   title="看不清点击刷新" id="vcode"
                                                                                   name="vcode"
                                                                                   style="float: right"/></a>
            </div>
            <input type="text" class="btn" id="btn2" value="点击注册"
                   style="background-color: rgb(17, 140, 223);outline:none;">
        </form>

        <script>
            //注册表单验证
            $(function () {
                $('#myform').bootstrapValidator({
                    message: 'This value is not valid',
                    live: 'enabled',
                    feedbackIcons: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    submitButtons: 'button[type="submit"]',
                    fields: {
                        musername: {
                            message: '请输入正确的用户名',
                            validators: {
                                notEmpty: {
                                    message: '用户名不能为空'
                                },
                                stringLength: {
                                    min: 6,
                                    max: 24,
                                    message: '用户名长度必须在6到24位之间'
                                },
                                regexp: {
                                    regexp: /^[a-zA-Z0-9_]+$/,
                                    message: '用户名只能包含大写、小写、数字和下划线'
                                }
                            }
                        },
                        memail: {
                            validators: {
                                notEmpty: {
                                    message: '邮箱地址不能为空'
                                },
                                emailAddress: {
                                    message: '邮箱地址格式有误'
                                }
                            }
                        },
                        password: {
                            validators: {
                                notEmpty: {
                                    message: '密码不能为空'
                                },
                                stringLength: {
                                    min: 8,
                                    max: 16,
                                    message: '用户名长度必须在8到16位之间'
                                },
                            }
                        },
                        mpassword: {
                            validators: {
                                notEmpty: {
                                    message: '密码不能为空'
                                },
                                identical: {
                                    field: 'password',
                                    message: '两次输入的密码不相符'
                                }
                            }
                        }
                    }
                });
            });

            function refreshCode1(resp) {
                $("#verify").prop("src", "/verifyCodeServlet/" + new Date().getTime())
            }
            function refreshCode2(resp) {
                $("#vcode").prop("src", "/verifyCodeServlet/" + new Date().getTime())
            }

            $("#btn2").click(function () {
                $.ajax({
                    type: "POST",
                    async: false,
                    url: "/register",
                    data: $("#myform").serialize(),
                    dataType: "text",
                    success: function (resp) {
                        alert("注册成功")
                        $(location).attr("href", "login.html")

                    }
                })
            })
        </script>
    </div>
</div>

</body>

</html>